<include file="public@header"/>
</head>
<body>
<div class="wrap">
    <ul class="nav nav-tabs">
        <li class=""><a href="{:url('project/index',array('id'=>$id))}">工程打款</a></li>
        <li class="active"><a>添加打款记录</a></li>
    </ul>
    <form method="post" class="form-horizontal js-ajax-form margin-top-20" action="{:url('project/doadd')}"
          enctype="multipart/form-data">


        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>收款日期
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="date" class="form-control" name="date">
            </div>
        </div>


        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>支付方式
            </label>
            <div class="col-md-6 col-sm-10">
                <select name="pay" class="form-control">
                    <option value=""></option>
                    <option value="1">微信</option>
                    <option value="2">支付宝</option>
                    <option value="3">银行卡</option>
                </select>
            </div>
        </div>


        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>事件
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="text" class="form-control" name="desc">
            </div>
        </div>

        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>单位
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="text" class="form-control" name="unit" value="元" readonly>
            </div>
        </div>


        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>金额
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="number" class="form-control" name="price">
            </div>
        </div>


        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>备注
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="text" class="form-control" name="title">
            </div>
        </div>

        <div class="form-group">
            <label for="js-smtpsecure" class="col-sm-2 control-label">
                <span class="form-required">*</span>图片
            </label>
            <div class="col-md-6 col-sm-10">
                <input type="file" id="imgUpload" class="form-control" name="img[]" multiple accept="image/*">
                <div id="imgPreviewContainer" class="image-preview-container" style="margin-top: 10px; display: flex; flex-wrap: wrap;"></div>
            </div>
        </div>

        <input type="hidden" name="eid" value="{$id}">

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-primary js-ajax-submit">{:lang('SAVE')}</button>
                <a class="btn btn-default" href="javascript:history.back(-1);">{:lang('BACK')}</a>
            </div>
        </div>
    </form>
</div>
<script src="__STATIC__/js/admin.js"></script>
<script src="__STATIC__/js/image-uploader.js"></script>
<style>
    /* 模态框样式 */
    .image-modal {
        display: none;
        position: fixed;
        z-index: 1000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.9);
        overflow: auto;
    }
    
    .modal-content {
        margin: auto;
        display: block;
        max-width: 90%;
        max-height: 90%;
        margin-top: 2%;
    }
    
    .modal-close {
        position: absolute;
        top: 15px;
        right: 35px;
        color: #f1f1f1;
        font-size: 40px;
        font-weight: bold;
        cursor: pointer;
    }
    
    .image-preview-item {
        position: relative;
        margin: 5px;
        width: 100px;
        height: 100px;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.2s;
    }
    
    .image-preview-item:hover {
        transform: scale(1.05);
    }
    
    .image-preview-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    .image-preview-item .delete-btn {
        position: absolute;
        top: 0;
        right: 0;
        background: rgba(255, 0, 0, 0.7);
        color: white;
        border: none;
        width: 20px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        cursor: pointer;
        font-size: 12px;
        z-index: 10;
    }
</style>
<script>
    // 页面加载完成后初始化所有功能
    document.addEventListener('DOMContentLoaded', function() {
        // 初始化图片上传组件
        const imgUploader = new ImageUploader({
            inputId: 'imgUpload',
            previewContainerId: 'imgPreviewContainer',
            fieldName: 'img',
            useDataTransfer: true
        });
    });
</script>

<!-- 图片预览模态框 -->
<div id="imageModal" class="image-modal">
    <span class="modal-close">&times;</span>
    <img class="modal-content" id="modalImage">
</div>
</body>
</html>